import { useEffect } from "react"
import header from '@/const/header'

export default function ajax() {
  useEffect(() => {
    // 创建一个Ajax对象
    let xhr = new XMLHttpRequest()
    /**
     * xhr 对象中的 open 方法是来配置请求信息的
     * 第一个参数是本次请求的请求方式 get / post / put / ...
     * 第二个参数是本次请求的 url
     * 第三个参数是本次请求是否异步，默认 true 表示异步，false 表示同步
     */
    xhr.open('GET', 'https://zllrjpn7.lc-cn-n1-shared.com/1.1/classes/stu', true)
    /**
     * 设置请求头
     */
    xhr.setRequestHeader('Content-Type', 'application/json')
    xhr.setRequestHeader('X-LC-Id', header.XLCID)
    xhr.setRequestHeader('X-LC-Key', header.XLCKEY)

    /**
     * 发送请求
     * post 请求携带参数时，需要在send传递参数
     * get 请求携带参数时，需要在url中拼接参数
     */
    xhr.send()
    /**
     * readystatechange 专门用来监听请求状态（readyState代表的是Ajax状态码）
     * readyState 0 1 2 3 4
     * 0 代表请求未初始化 （也就是open方法还没有执行）
     * 1 代表服务器连接已建立 （表示配置信息已经完成，但是服务器还没有开始处理请求，也就是open方法已经执行）
     * 2 代表请求已接收（send方法已经执行，请求已经发送给服务器，但是服务器还没有开始处理请求）
     * 3 代表请求处理中 （服务器已经开始处理请求，但是还没有处理完成，即正在解析响应内容）
     * 4 代表请求已完成，且响应已就绪 （服务器已经处理完成，响应内容已经解析完成，可以在客户端调用了）
     */
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
        console.log('获取状态码', xhr.responseText,JSON.parse(xhr.responseText))
      }
    }
  },[])
  return (
    <div>ajax</div>
  )
}
